<template>
	<view class="p-10">
		<u-collapse :value="showMoreKeys" ref="collapse">
			<u-collapse-item name="2">
				<template #title>
					<view class="content-item-title"><text class="title-txt">车间设备状态</text></view>
				</template>
				<view class="title p-b-10 fw flex s-center">
					<view class="m-r-10">
						<image :src="getImgUrl('index/chejian.png')" mode="widthFix" style="width:28rpx" />
						一车间
					</view>
					<my-picker class="f1 w0" v-model="selectVal1" :columns="data1" />
				</view>
				<my-table :columns="columns" :data="tableData1" />
				<view class="title p-y-10 fw m-t-10 flex s-center">
					<view class="m-r-10">
						<image :src="getImgUrl('index/chejian.png')" mode="widthFix" style="width:28rpx" />
						二车间
					</view>
					<my-picker class="f1 w0" v-model="selectVal2" :columns="data2" />
				</view>
				<my-table :columns="columns" :data="tableData2" />
			</u-collapse-item>
		</u-collapse>
		<up-back-top :scroll-top="scrollTop"></up-back-top>
	</view>
</template>

<script setup>
	/**************************************返回顶部*************************************************/
	const scrollTop = ref(0);
	onPageScroll((e) => {
		scrollTop.value = e.scrollTop;
	})

	/**************************************请求数据逻辑*************************************************/
	import {
		getApiFabric
	} from '@/api/customApi'
	const showMoreKeys = ref([1, 2, 3, 4]),
		collapse = ref(null)

	/*******************************************车间设备状态******************************************/
	const selectVal1 = ref(''),
		data1 = ref([]),
		selectVal2 = ref(''),
		data2 = ref([]),
		tableData1 = ref([]),
		tableData2 = ref([]),
		columns = [{
			prop: '属性',
			label: '属性',
			width: 90,
		}, {
			prop: '属性值',
			label: '属性值',
			width: 80,
		}, {
			prop: '时间',
			label: '时间',
			width: 150,
		}]

	function fn() {
		getApiFabric({
			apiCode: "caa76e54-790c-498c-8017-a4fe7084d6b9",
			params: [{
				code: "productKey",
				value: "STM-DeviceState-Shop01-Product",
			}],
			propertyMapping: {
				dictLabel: "deviceName",
				dictValue: "deviceKey"
			},
		}).then((res) => {
			data1.value = [res.data];
			selectVal1.value = 'STM-YCJ-ZT-314PDJ'
		})
	}

	watch(selectVal1, (val) => {
		if (val) fn1()
	}, {
		immediate: true
	})

	function fn1() {
		getApiFabric({
			apiCode: "a0dc1914-e6b9-4dae-b8df-793b1bff9bb3",
			params: [{
				code: "deviceKeies",
				value: selectVal1.value,
			}],
			propertyMapping: {
				属性: "name",
				属性值: "value",
				时间: "time"
			},
		}).then((res) => {
			tableData1.value = res.data
			nextTick(() => {
				collapse.value.init()
			})
		})
	}

	function fn2() {
		getApiFabric({
			apiCode: "caa76e54-790c-498c-8017-a4fe7084d6b9",
			params: [{
				code: "productKey",
				value: "STM-DeviceState-Shop02-Product",
			}],
			propertyMapping: {
				dictLabel: "deviceName",
				dictValue: "deviceKey"
			},
		}).then((res) => {
			data2.value = [res.data]
			selectVal2.value = 'STM-ECJ-ZT-A201PDJ'
		})
	}
	watch(selectVal2, (val) => {
		if (val) fn3()
	}, {
		immediate: true
	})

	function fn3() {
		getApiFabric({
			apiCode: "d48edbbb-0253-4931-b379-ae01bed05a80",
			params: [{
				code: "deviceKeies",
				value: selectVal2.value,
			}],
			propertyMapping: {
				属性: "name",
				属性值: "value",
				时间: "time"
			}
		}).then((res) => {
			tableData2.value = res.data
			nextTick(() => {
				collapse.value.init()
			})
		})
	}

	function getServerData(refresh) {
		Promise.all([fn(), fn2()]).then(() => {
			if (refresh) {
				nextTick(() => {
					uni.stopPullDownRefresh()
				})
			}
		});
	}

	onShow(() => {
		getServerData()
	})

	onPullDownRefresh(() => {
		selectVal1.value = '';
		selectVal2.value = '';
		getServerData(true)
	})
</script>

<style scoped lang="scss">
	.video {
		width: 100%;
		height: 200rpx;
	}
</style>